.ResizeHandle {
  flex: 0 0 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: none;
  color: var(--color-resize-bar);
}
.ResizeHandle:hover {
  color: var(--color-resize-bar-hover);
}
.ResizeHandle[data-resize-handle-active] {
  color: var(--color-resize-bar-active);
}

.ResizeHandle .ResizeHandleThumb[data-direction="vertical"] {
  rotate: 90deg;
}

@media (pointer: coarse) {
  .ResizeHandle {
    flex: 0 0 2rem;
  }

  .ResizeHandle .ResizeHandleThumb {
    flex: 0 0 1.25rem;
    height: 1.25rem;
    width: 1.25rem;
  }
}
